<template>
  <!-- 支付密码 -->
  <div v-if="setPwd == '1'">
    <el-form :model="formLabelAlign" label-position="top" label-width="auto">
      <el-form-item
        :label="$t('layer.wallet.Paypassword')"
        :rules="[
          {
            required: true,
            message: `${$t('page.setting.Enter')} ${$t(
              'layer.wallet.Paypassword'
            )}`,
            trigger: 'change'
          }
        ]"
      >
        <el-input v-model="formLabelAlign.walletPwd"></el-input>
        <div class="w-full flex justify-end">
          <div>{{ $t("layer.wallet.Forgotpassword") }}</div>
          <div
            class="ml-1 text-[#1474de] underline cursor-pointer"
            @click="setPwd = '2'"
          >
            {{ $t("layer.wallet.Clickhere") }}
          </div>
        </div>
      </el-form-item>
    </el-form>

    <div class="w-full flex justify-center mt-32">
      <button class="h-8 bg-[#1475e1] w-full rounded-md" @click="nextstep">
        {{ $t("layer.wallet.nextstep") }}
      </button>
    </div>
  </div>

  <!-- 忘记支付密码 -->
  <setWithdrawalPassword v-else @submitFrom="getSubmitFrom" />
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import setWithdrawalPassword from "./setWithdrawalPassword.vue";
import { getTicket } from "@/api/user.js";
import { ElNotification } from "element-plus";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
/**
 * 提现密码
 *  1.输入提现密码
 *  2.忘记提现密码
 */
const setPwd = ref("1");
const walletPwd = ref("");
const formLabelAlign = reactive({
  conInputValues: "",
  inputValues: "",
  walletPwd: ""
});

const ticket = ref("");
const nextstep = () => {
  console.log("formLabelAlign.walletPwd", formLabelAlign.walletPwd.length);

  if (!formLabelAlign.walletPwd.length)
    return ElNotification({
      position: "top-left",
      zIndex: 1015,
      message: `${t("layer.wallet.PayPwd")}`,
      type: "error"
    });

  let data = {
    usage: "user_withdraw",
    password_approval: formLabelAlign.walletPwd,
    password_type: "payment"
  };
  getTicket(data).then((res: any) => {
    if (res.errno == 0) {
      ticket.value = res.data.ticket;

      emit("setTicket", ticket.value);
      // emit("alterPwd", "bankDetails"); // 密码修改成功
    }
  });
};

const emit = defineEmits(["alterPwd", "setTicket"]);
const getSubmitFrom = (data: any) => {
  setPwd.value = "1";
  emit("alterPwd", "bankDetails"); // 密码修改成功
};
</script>

<style lang="scss" scoped>
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-form-item__error) {
  margin-bottom: 12px;
}
:deep(.el-form--label-top .el-form-item) {
  margin-bottom: 32px;
}
</style>
